import { Form, Input, Select } from 'antd';
import type { HttpMethod } from '../types/http';
import { useStyles } from './styles';

const { Option } = Select;

const BasicConfig: React.FC = () => {
  const { styles } = useStyles();

  return (
    <>
      <Form.Item className={styles.card}>
        <Form.Item
          label="Host"
          name="host"
          rules={[{ required: true, type: 'url' }]}
        >
          <Input placeholder="http://localhost:3000" />
        </Form.Item>

        <Form.Item label="API" name="api" rules={[{ required: true }]}>
          <Input placeholder="/api/v1/users" />
        </Form.Item>

        <Form.Item label="Method" name="method">
          <Select>
            {(['GET', 'POST', 'PUT', 'DELETE'] as HttpMethod[]).map((m) => (
              <Option key={m} value={m}>
                {m}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form.Item>
    </>
  );
};

export default BasicConfig;
